<template>
    <div class="myCollection-wrapper">
        <IHeader class="header" back="true" title="我的浏览" :manage="!editing" @manage="handleManage" :finish="editing" @finish="handleFinish"></IHeader>
        <list class="itemList" v-if="itemList && itemList.length > 0" @loadmore="loadMore">
            <cell class="itemCell" v-for="(item, index) in itemList" :key="index" @click="handleClickCell(item, index)">
                <div class="flex_row">
                    <Check class="margin_top_70 margin_right_24" :show="editing" :checked="deleteList[index].checked || clearAll" @doclick="handleClickCell(item, index)"></Check>
                    <image class="item-image" :src="item.imageUrl ? item.imageUrl : imgPath('default_image.png')"></image>
                    <div class="item-info border-bottom-cecece">
                        <text class="item-title">{{item.goodsName}}</text>
                        <text class="item-number">{{item.number ? item.number : 0}}人收藏</text>
                        <div class="item-status-active flex_row">
                            <text class="item-status-unactive" v-if="!item.price">失效</text>
                            <text class="item-price" v-if="item.price">￥&nbsp;{{item.discountPrice ? item.discountPrice : item.price}}/{{item.priceUnit}}</text>
                            <text class="toBuy" v-if="!editing">去购买</text>
                        </div>
                    </div>
                </div>
            </cell>
        </list>
        <div class="clear-wrapper flex_row" v-if="editing">
            <div class="flex_row align_center" @click="seleceAll">
                <Check class="margin_right_24" :show="editing" :checked="clearAll" @doclick="seleceAll"></Check>
                <text class="col_464646 fs_28">全选</text>
            </div>
            <text class="delete" @click="deleteData">删除</text>
        </div>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import Check from '@/components/check'
import { WxcLoading } from 'weex-ui'
import { userMyView, deleteUserMyView } from '@/api/user'

const modal = weex.requireModule('modal')
export default {
  name: 'myCollection',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: false, // loading
      hasMore: true, // 是否还有数据
      editing: false, // 编辑中
      deleteList: [], // 存储删除下标
      clearAll: false, // 删除全选
      pageNo: 1, // 页码
      pageSize: 10, // 条数
      itemList: [] // 数据数组
    }
  },
  watch: {
    itemList (newValue, oldValue) {
      const that = this
      that.deleteList = []
      for (let i = 0; i < newValue.length; i++) {
        let obj = {
          checked: false
        }
        that.deleteList.push(obj)
      }
    },
    deleteList: {
      handler (newValue, oldValue) {
        const that = this
        let count = 0
        newValue.forEach((item) => {
          if (!item.checked) {
            count++
          }
        })
        if (count > 0) {
          that.clearAll = false
          return
        }
        that.clearAll = true
      },
      deep: true
    }
  },
  mounted () {
    const that = this
    that.getDataList()
  },
  methods: {
    getDataList () { // 获取数据列表
      const that = this
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize
      }
      that.loadingShow = true
      that.$api.get(userMyView, params, (res) => {
        that.loadingShow = false
        let list = res.data.records
        if (list.length <= 0) {
          that.hasMore = false
          modal.toast({
            message: '没有数据了~'
          })
          return
        }
        that.itemList = that.itemList.concat(list)
      }, () => {
        that.loadingShow = false
      }, true)
    },
    loadMore () { // 加载更多
      const that = this
      if (!that.hasMore) {
        return
      }
      that.pageNo++
      that.getDataList()
    },
    handleClickCell (item, inx) { // 点击
      const that = this
      if (that.editing) {
        that.deleteList[inx].checked = !that.deleteList[inx].checked
      } else {
        that.$router.push({
          path: '/store/storeDetail',
          query: {
            goodsId: item.goodsId
          }
        })
      }
    },
    handleManage () { // 管理
      this.editing = true
    },
    seleceAll () { // 全选
      const that = this
      if (that.itemList.length <= 0) {
        return
      }
      that.clearAll = !that.clearAll
    },
    deleteData () { // 删除
      const that = this
      if (that.itemList.length <= 0) {
        return
      }
      let params = {
        ids: []
      }
      if (!that.clearAll) {
        that.deleteList.forEach((item, index) => {
          if (item.checked) {
            params.ids.push(that.itemList[index].id)
          }
        })
        if (params.ids.length <= 0) {
          return
        }
      }
      modal.confirm({
        message: '确定删除？',
        okTitle: '确定',
        cancelTitle: '取消'
      }, function (value) {
        if (value === '确定') {
          that.loadingShow = true
          that.$api.post(deleteUserMyView, params, () => {
            that.loadingShow = false
            modal.toast({
              message: '删除成功',
              duration: 0.8
            })
            that.itemList = []
            that.getDataList()
            that.editing = false
          }, () => {
            that.loadingShow = false
          }, true)
        }
      })
    },
    handleFinish () { // 完成
      this.editing = false
    }
  },
  components: {
    IHeader,
    WxcLoading,
    Check
  }
}
</script>

<style scoped>
    .fs_28 {
        font-size: 28px;
    }
    .col_464646 {
        color: #464646;
    }
    .align_center {
        align-items: center;
    }
    .margin_right_24 {
        margin-right: 24px;
    }
    .border-bottom-cecece {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #cecece;
    }
    .flex_row {
        flex-direction: row;
    }
    .itemList {
        overflow: hidden;
        min-height: 500px;
        margin-top: 88px;
    }
    .itemCell {
        /*overflow: hidden;*/
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .toDelete {
        position: absolute;
        right: -80px;
        top: 16px;
        width: 80px;
        height: 180px;
        text-align: center;
        font-size: 30px;
        color: #fff;
        line-height: 180px;
        background-color: #ff0f37;
    }
    .item-image {
        width: 180px;
        height: 180px;
        margin-right: 24px;
    }
    .item-info {
        flex: 1;
        padding-bottom: 24px;
    }
    .item-title {
        height: 72px;
        lines: 2;
        font-size: 28px;
        line-height: 36px;
        text-overflow: ellipsis;
    }
    .item-number {
        margin-top: 8px;
        font-size: 24px;
        color: #cecece;
    }
    .item-status-active {
        margin-top: 18px;
        align-items: flex-end;
        justify-content: space-between;
    }
    .item-price {
        font-weight: bold;
        font-size: 36px;
        color: #fecb01;
    }
    .toBuy {
        width: 150px;
        height: 50px;
        border-width: 1px;
        border-style: solid;
        border-color: #545c72;
        font-size: 28px;
        color: #545c72;
        line-height: 48px;
        text-align: center;
        border-radius: 10px;
    }
    .item-status-unactive {
        width: 96px;
        height: 40px;
        font-size: 24px;
        line-height: 40px;
        text-align: center;
        border-radius: 8px;
        color: #fff;
        background-color: #cecece;
    }
    .margin_top_70 {
        margin-top: 70px;
    }
    .clear-wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #ebebeb;
        background-color: #fff;
        justify-content: space-between;
    }
    .delete {
        width: 176px;
        height: 60px;
        line-height: 60px;
        font-size: 26px;
        text-align: center;
        border-radius: 10px;
        color: #fff;
        background-color: #2b3040;
    }
</style>
